<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<script type="text/javascript">
$(document).ready(function(){
	$("#modify_btn_mypage").click(function(){
		$("#nick_mypage").html("<input name='nick' type='text'>");
		$("#password_mypage").html("비밀번호 입력<input name='password' type='password' id='password_mypage2'><br>재입력<input id='retype_password_mypage' type='password'>");
		$("#button_mypage").html("<input type='button' id='modify_btn_mypage2' value='수정하기'>");
	});
	$("#out_btn_mypage").click(function(){
		if(confirm("정말 탈퇴하시겠습니까?")){
			location.href="${initParam.root}member/outMember.do";
		}else{
			return;
		}
	});
	$("#button_mypage").on("click","#modify_btn_mypage2", function(){
		if($(":input[name=nick]").val()==""){
			alert("닉네임을 입력해 주세요!");
			return;
		}
		
		if(($("#passFlag_mypage").val()!="")&&($("#passFlag_mypage").val()==$("#retype_password_mypage").val())){
			$("#updateMember").submit();
    	}else{
    		alert("비밀번호체크 부탁드려요!");
  			return;
  		}
		
  	 });
	
	$("#password_mypage").on("keyup","#retype_password_mypage", function(){
		if($("#password_mypage2").val()==$("#retype_password_mypage").val()){
  			$("#passCheck_mypage").html("비밀번호가 일치합니다!").css("background","skyblue");
  			$("#passFlag_mypage").val($("#retype_password_mypage").val());
  		}else{
  			$("#passCheck_mypage").html("비밀번호가 일치하지않습니다!").css("background","#ffd8d8");
  			$("#passFlag_mypage").val("");
  		}
  	 });
});
</script>
<center>
<form method="post" id="updateMember" action="${initParam.root }member/updateMember.do">
   <table class="myPageForm" >
    <caption>내 정보</caption>
    <tbody>
    <tr>
     <td>이메일</td><td><span id="email_mypage">${sessionScope.mvo.email }</span></td>     
    </tr>
    <tr>
     <td>비밀번호</td><td align="center"><span id="password_mypage"><input type="password" value="${sessionScope.mvo.password }" readonly></span><br><span id="passCheck_mypage"></span></td>
    </tr>
    <tr>
     <td>닉네임</td><td align="center"><span id="nick_mypage">${sessionScope.mvo.nick }</span></td>
    </tr>
    <tr>
     <td>포인트</td><td><span id="point_mypage">${sessionScope.mvo.point }</span></td>
    </tr>	
    <tr>
     <td>레벨</td><td><span id="grade_mypage">${sessionScope.mvo.grade }</span></td>
    </tr>    
    <tr>
     <td>가입일자</td><td><span id="date_mypage">${sessionScope.mvo.date }</span></td>
    </tr>	
    <tr>
     <td colspan="4" align="center" >
     	<span id="button_mypage">
      	<input type="button" id="modify_btn_mypage" value="수정">
      	<input type="button" id="out_btn_mypage" value="탈퇴">
      <%-- <img class="action" src="${initParam.root}img/modify_btn.jpg" alt="수정"  id="modify_btn_mypage">
      <img class="action" src="${initParam.root}img/cancel.gif" id="cancelBtn"> --%>
      	</span>
     </td>  
    </tr>    
    </tbody>    	 
   </table>
   <input type="hidden" id="passFlag_mypage" value="">
  </form>
</center>